import React from 'react';
import {View, Text, StyleSheet} from 'react-native';
import { groupSpacing } from '../../config/style_variable';

module.exports = function GroupInput({icon, rightButton, children}) {
  return (
    <View style={styles.group_input}>
      <View style={styles.icon}>{icon ? icon : <Text>123</Text>}</View>

      <View style={{flex: 22,flexDirection: 'row', justifyContent: 'space-between',}}>
        <View style={styles.input}>{children}</View>

        { rightButton &&
          <View style={styles.rightButton}>{rightButton}</View>
        }
      </View>
    </View>
  )
}

let styles = StyleSheet.create({
  group_input: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    borderStyle: 'solid',
    borderBottomWidth: 1,
    borderBottomColor: '#ddd',
    marginBottom: groupSpacing,
    height: 40,
  },
  input: {
    flex: 18,
    height: 40,
  },
  icon: {
    flex: 2,
    justifyContent: 'center',
    alignItems: 'center',
  },
  rightButton: {
    flex: 6,
    justifyContent: 'center',
    alignItems: 'center',
  },

})
